<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form onsubmit="javascript: return false;">
        <textarea name="message" style="width: 400px; height: 200px;"></textarea>


        <input type="button" value="发送数据" onclick="onSendClick(this.form.message.value)"/>

        <h3> 服务器端输出</h3>

        <textarea id="responseText" style="width: 400px;height: 300px;"></textarea>

        <input type="button"  onclick="javascript: document.getElementById('responseText').value=''" value="清空"/>
    </form>
<script>
    var socket ;
    if(window.WebSocket) {
        socket=new WebSocket("ws://localhost:8899/ws");
        socket.onmessage=function(event) {
            var ta = document.getElementById('responseText');
            ta.value = ta.value+"\n"+event.data
        }
        socket.onopen=function(event) {
            var ta = document.getElementById('responseText');
            ta.value = ta.value+"\n"+"连接开启"
        }
        socket.onclose=function (event) {
            var ta = document.getElementById('responseText');
            ta.value = ta.value+"\n"+"连接断开"
        }
    }else {
        alert(" 浏览器不支持 webSocket")
    }

    function onSendClick(message) {
        if(!window.WebSocket){
            return;
        }
        if(socket.readyState=WebSocket.OPEN) {
            socket.send(message);
        }else {
            alert("连接尚未开启!")
        }
    }

</script>
</body>
</html>